import 'package:flutter/material.dart';
import 'package:flutter_app/pages/search/fliter_bar/data.dart';
// import 'package:flutter_app/models/general_type.dart';
//
import 'package:flutter_app/scoped_model/filter_bar.dart';
import 'package:flutter_app/utils/scoped_model_helper.dart';
import 'package:flutter_app/widgets/common_title.dart';

class FilterDrawer extends StatelessWidget {
  const FilterDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Map<String, List<GeneralType>> dataList = <String, List<GeneralType>>{};

    var dataList = ScopedHelperModel.getModel<FilterBarModel>(context).dataList;
    // roomTypeList = dataList['roomTypeList']!;
    // orientedList = dataList['orientedList']!;
    // floorList = dataList['floorList']!;

    var selectedIds = ScopedHelperModel.getModel<FilterBarModel>(context)
        .selectedIdList
        .toList();

    _onChange(String val) {
      ScopedHelperModel.getModel<FilterBarModel>(context)
          .selectedToggleItem(val);
    }

    //! SafeArea 不规则屏幕，自动避开遮挡区域
    return Drawer(
      child: SafeArea(
          child: ListView(
        children: [
          const CommonTitle(title: '户型'),
          ItemTag(
            list: roomTypeList,
            selectedIds: selectedIds,
            onChange: _onChange,
          ),
          const CommonTitle(title: '朝向'),
          ItemTag(
            list: orientedList,
            selectedIds: selectedIds,
            onChange: _onChange,
          ),
          const CommonTitle(title: '楼层'),
          ItemTag(
            list: floorList,
            selectedIds: selectedIds,
            onChange: _onChange,
          ),
        ],
      )),
    );
  }
}

class ItemTag extends StatelessWidget {
  const ItemTag({
    Key? key,
    required this.list,
    required this.selectedIds,
    required this.onChange,
  }) : super(key: key);
  final List<GeneralType> list;
  final List<String> selectedIds;
  final ValueChanged<String> onChange;
  @override
  Widget build(BuildContext context) {
    var mainColor = Theme.of(context).primaryColor;
    return Wrap(
      spacing: 5.0,
      runSpacing: 8.0,
      children: list.map((e) {
        var isActive = selectedIds.contains(e.id);
        return Padding(
          padding: const EdgeInsets.only(left: 10.0),
          child: GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTap: () {
              onChange(e.id);
            },
            child: Container(
              padding: const EdgeInsetsDirectional.fromSTEB(6, 4, 6, 4),
              child: Text(
                e.name,
                style: TextStyle(color: isActive ? Colors.white : mainColor),
              ),
              decoration: BoxDecoration(
                  color: isActive ? mainColor : Colors.white,
                  border: Border.all(color: mainColor)),
            ),
          ),
        );
      }).toList(),
    );
  }
}
